<template>
  <div :class="$style.whitemodal3">
    <div :class="$style.topBlock">
      <lay-select v-model="type" placeholder="请选择类型">
        <lay-select-option v-for="(item, index) in typeList" :key="index" :value="item.id" :label="item.name"></lay-select-option>
      </lay-select>
      <lay-date-picker v-model="time" simple type="date" placeholder="请选择日期"></lay-date-picker>
      <lay-button type="primary">
        <img :class="$style.searchIcon" src="/sousuobai.png" alt="" />
        <div :class="$style.searchText">搜索</div>
      </lay-button>
      <lay-button>
        <img :class="$style.searchIcon" src="/chongzhihei.png" alt="" />
        <div :class="$style.searchText">重置</div>
      </lay-button>
    </div>
    <div :class="$style.mainBlock">
      <lay-table :page="pageInfo" height="100%" :columns="columnList" :data-source="dataList" @change="changePage">
      </lay-table>
    </div>
  </div>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
  name: "WhiteModal3",
  data() {
    return {
      type: '',
      typeList: [
        { id: '1', name: '入金' },
        { id: '2', name: '出金' },
        { id: '3', name: '合约-建仓金额' },
        { id: '4', name: '合约-建仓手续费' },
        { id: '5', name: '合约-保证金' },
        { id: '6', name: '合约-盈亏' },
        { id: '7', name: '合约-平仓手续费' },
        { id: '8', name: '合约-平仓金额' },
      ],
      time: '',
      pageInfo: { current: 1, limit: 10, total: 100 },
      dataList: [
        // {name1:'sas001',name2:'222',name3:'333'},
        // {name1:'sas001',name2:'222',name3:'333'},
      ],
      columnList: [
        { title: '金额', width: '', key: 'name1' },
        { title: '类型', width: '', key: 'name2' },
        { title: '日期', width: '', key: 'name3' },
      ],
    };
  },
  methods: {
    changePage(page) {
      console.log(page)
    },
  }
});
</script>
<style module>
.whitemodal3 {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 0 20px;
  overflow-y: auto;
}

.topBlock {
  width: 100%;
  height: 77px;
  box-sizing: border-box;
  padding-top: 25px;
  display: flex;
}

.searchIcon {
  width: 16px;
  height: 16px;
}

.searchText {
  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: normal;
  margin-left: 8px;
}

.mainBlock {
  width: 100%;
  height: calc(100% - 77px);
  box-sizing: border-box;
  padding-bottom: 20px;
}
</style>
<style scoped>
.layui-select {
  width: 168px;
  margin-right: 10px;
}

.layui-date-picker {
  width: 168px;
  margin-right: 10px;
}
.layui-btn{
  width: 80px;
}
.layui-btn :deep(span) {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>